<template>
	<view>
		<u-navbar :is-back="false" title="" :height="44" :border-bottom="false" :background="background">
			<view class="slot-wrap">
				<view class="" @click="goBack()" style="height:50rpx;width:60rpx;"></view>
				<view class=""  @click="confrimUpdatePwd()"  style="width: 100rpx;height: 60rpx;"></view>
			</view>
		</u-navbar>
		<view>
			<u-image :src="descImg" width="750rpx" mode="widthFix"></u-image>
		</view>
		<view class="input-area u-font-32">
			<view style="width: 100%;height:100%;">
				<view  class="u-flex u-row-left u-col-center" style="width:100%;height: 28%;">
					<view style="width:200rpx;"></view>
					<view class="u-tips-color u-p-t-5">
						<text>{{vuex_userInfo.chatNumber}}</text>
					</view>
				</view>
				<view class="u-flex u-row-left u-col-bottom" style="width:100%;height: 24%;">
					<view style="width:200rpx;"></view>
					<view class="" style="width: 520rpx;">
						<u-input v-model="loginForm.oldPassword" type="password" :border="false" :clearable="false"
								:custom-style="customInputStyle"   :password-icon="false"
								placeholder="填写原密码" placeholder-style="color:#909399;fontSize:32rpx;padding-top:10rpx"/>
					</view>
				</view>
				<view class="u-flex u-row-left u-col-bottom" style="width:100%;height: 24%;">
					<view style="width:200rpx;"></view>
					<view class="" style="width: 520rpx;">
						<u-input v-model="loginForm.newPassword" type="password" :border="false" :clearable="false"
								:custom-style="customInputStyle"   :password-icon="false"
								placeholder="填写新密码" placeholder-style="color:#909399;fontSize:32rpx;padding-top:5rpx"/>
					</view>
				</view>
				<view class="u-flex u-row-left u-col-bottom" style="width:100%;height:24%;">
					<view style="width:200rpx;"></view>
					<view class="" style="width: 520rpx;">
						<u-input v-model="loginForm.confirmPassword" type="password" :border="false" :clearable="false"
								:custom-style="customInputStyle"   :password-icon="false"
								placeholder="再次填写确认" placeholder-style="color:#909399;fontSize:32rpx;"/>
					</view>
				</view>
			</view>
		</view>
		<view class="u-m-t-10">
			<u-image :src="footerImg" width="100%" mode="widthFix"></u-image>
		</view>
	</view>
</template>

<script>
	var imgPrefix="/static/image/mycenter/update-password/";
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#f7f7f7',
					backgroundImage: 'url('+imgPrefix+'/navbar.png)',
					backgroundRepeat: 'no-repeat',
					backgroundSize: '750rpx 165rpx',
					backgroundPosition: 'center bottom'
				},
				customInputStyle:{
					fontSize:"32rpx",
					color:'#606266',
					paddingTop:'10rpx'
				},
				loginForm:{
					oldPassword:'',
					newPassword:'',
					confirmPassword:'',
				},
				descImg:imgPrefix+"desc.png",
				footerImg:imgPrefix+"footer.png",
			};
		},
		methods:{
			goBack(){
				uni.navigateBack();
			},
			confrimUpdatePwd(){
				let that=this;
				if(that.loginForm.oldPassword.length<1){
					this.globalUtil.utilAlert("原密码不能为空");
					return;
				}
				if(that.loginForm.newPassword.length<1){
					this.globalUtil.utilAlert("新密码不能为空");
					return;
				}
				if(that.loginForm.confirmPassword.length<1||that.loginForm.confirmPassword!=that.loginForm.newPassword){
					this.globalUtil.utilAlert("确认密码与新密码不一致");
					return;
				}
				let param=that.loginForm;
				console.log("修改密码参数",param);
				that.$u.api.imUser.updateUserPassword(param).then(res => {
					if(res.code==200){
						that.globalUtil.utilAlert("修改完成,请重新登录!");
						setTimeout(function(){
							that.loginOut();
						},2000)
					}
				})
			},
			
			loginOut:function (){
			  let that=this;
			 this.globalUtil.utilLoading("正在退出登录...",true);
			  //调用service请求后台的接口
			  this.$u.api.sys.loginOut({}).then(res => {
			    uni.hideLoading();
				if(res.code==200){
					this.globalWX.closeWS();
					this.globalUtil.clearVuex(that);
					setTimeout(function(){
						that.$u.route({
							type:'reLaunch',
							url:"/pages/start/wx-login",
							params: {}
						})
					},500);
					return;
				}
				else {
					//密码错误提示
					this.globalUtil.utilAlert(res.message, "none");
					return;
			    }
			  }).catch(res => {
					console.log("res",res);
					this.globalUtil.utilAlert("后台请求失败,请联系管理员!");
			  })
			},
		}
	}
</script>

<style lang="scss" scoped>
$imgPrefix:"/static/image/mycenter/update-password/";
.slot-wrap {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	/* 如果您想让slot内容占满整个导航栏的宽度 */
	flex: 1;
	/* 如果您想让slot内容与导航栏左右有空隙 */
	padding: 0 30rpx;
	height: 60rpx;
}

.input-area{
	width: 100%;
	height: 381rpx;
	background-image: url($imgPrefix+"content.png");
	background-repeat: no-repeat;
	background-size: cover;
}
</style>
<style>
	page{
		background-color: rgb(237, 237,237);
	}
</style>
